<template>
    <div class="leave-pending-edit">
        <Row class="leave-pending-edit-rows">
            <Col span="5">{{"教师姓名："}}</Col>
            <Col span="19">{{datalists.teacher_leave.teacher.teacher_name.zh!=null ? datalists.teacher_leave.teacher.teacher_name.zh : ''}}</Col>
        </Row>
        <Row class="leave-pending-edit-rows">
            <Col span="5">{{"请假种类："}}</Col>
            <Col span="19">{{datalists.teacher_leave.teacher_leave_kinds[0].dictionary_name.zh}}</Col>
        </Row>
        <Row class="leave-pending-edit-rows">
            <Col span="5">{{"请假开始时间："}}</Col>
            <Col span="19">{{datalists.teacher_leave.start_time}}</Col>
        </Row>
        <Row class="leave-pending-edit-rows">
            <Col span="5">{{"请假结束时间："}}</Col>
            <Col span="19">{{datalists.teacher_leave.end_time}}</Col>
        </Row>
        <Row class="leave-pending-edit-rows">
            <Col span="5">{{"请假天数："}}</Col>
            <Col span="19">{{datalists.teacher_leave.leave_days!=null? `${datalists.teacher_leave.leave_days}天`:`0天`}}</Col>
        </Row>
        <Row class="leave-pending-edit-rows">
            <Col span="5">{{"是否调课："}}</Col>
            <Col span="19">{{datalists.teacher_leave.whether_class==1 ? '是': '否'}}</Col>
        </Row>
        <Row class="leave-pending-edit-rows">
            <Col span="5">{{"教师请假原因："}}</Col>
            <Col span="19">{{datalists.teacher_leave.teacher_leave_reason.zh}}</Col>
        </Row>

        <div class="detail-records">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <p class="leave-pending-edit-rows">请假审核记录</p>
            <Table :columns="columns2" :data="datalist" height="400"></Table>
        </div>

        <div class="detail-records" v-if="iswhether">
            <Spin size="large" fix v-if="spinShow"></Spin>
            <p class="leave-pending-edit-rows">调课记录</p>
            <Table :columns="columns1" :data="whetherlist" height="400"></Table>
        </div>
        <Form ref="form" :model="form" :rules="ruleValidate" label-position="top">
            <FormItem label="选择审核状态" prop="examine">
                <Select v-model="form.examine" @on-change="auditestatu"  placeholder="请选择审核状态">
                    <Option v-for="item in exdata" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </FormItem>
            <div v-if="isshow">
                <FormItem label="审核意见" prop="reason.zh" >
                    <Input v-model="form.reason.zh" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入审核意见"></Input>
                </FormItem>
                
            </div>
            <FormItem label="选择审核人" v-if="shows">
                <div style="margin-bottom:3px">
                    <Tag closable v-for="item in allPoles" :key="item.id" :name="item.id"  @on-close="delPople">{{item.teacher_name.zh?item.teacher_name.zh:item.teacher_name.mn}}</Tag>
                </div>
                <Poptip placement="bottom-start" width="400" trigger="hover">
                    <Button>添加审核人</Button>
                    <div slot="content" style="padding:10px">
                        <Select placeholder="请选择职务" v-model="duties_id" style="display:block" @on-change="studentInfo">
                            <Option v-for="item in gradelist" :value="item.id" :key="item.id"> {{item.duties_name.zh?item.duties_name.zh:item.duties_name.mn}}</Option>            
                        </Select>
                        <Select placeholder="请选择审核人" v-model="form.examine_id" style="display:block" @on-change="person">
                            <Option v-for="item in teacherlist" :value="item.user_id" :key="item.user_id"> {{item.teacher_name.zh?item.teacher_name.zh:item.teacher_name.mn}}</Option>            
                        </Select>
                        <Button type="primary" style="margin-top:10px" @click="addPeple">添加审核人</Button>
                    </div>
                </Poptip>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="submit('form')" long :loading="btnload">保存审核</Button>
            </FormItem>
        </Form>
    </div>
    
</template>

<script>
export default {
    props:['datalists'],
    data () {
        return {
            btnload:false,
            duties_id:null,
            spinShow:false,
            datalist:[],
            iswhether:false,
            changeOnSelect:false,
            teacherlist:[],
            gradelist:[],
            isshow:false,
            shows:false,
            allPoles: [],
            examine_id: null,
            exdata:[
                {
                    value:'yes',
                    label:'同意'
                },
                {
                    value:'no',
                    label:'不同意'
                },
                {
                    value:'no_sure',
                    label:'同意并向上级审批'
                },
            ],
            form:{
                reason:{
                    zh:null,
                    mn:null,
                    en:null,
                },
                examine:'yes',
            },
            whetherlist:[],
            columns1: [
                {
                    title: '请假开始时间',
                    render: (h, params) => {                      
                        return h('div', params.row.start_time);
                    }
                },
                {
                    title: '请假结束时间',
                    render: (h, params) => {                      
                        return h('div', params.row.end_time);
                    }
                },
                {
                    title: '调课安排',
                    render: (h, params) => {
                        return h('div', `${params.row.date + params.row.week_id.dictionary_name.zh + params.row.class_type.name.zh + params.row.course_id.course_name.zh}`);
                    }
                },
                {
                    title: '调课教师',
                    render: (h, params) => {
                        return h('div',params.row.to_teacher!=null?params.row.to_teacher.teacher_name.zh:'未调课');                            
                    }
                },
            ],
            columns2: [
                {
                    title: '审核人姓名',
                    render: (h, params) => {
                        return h('div', params.row.teacher!=null?params.row.teacher.teacher_name.zh:'');
                    }
                },
                {
                    title: '审核状态',
                    render: (h, params) => {
                        let col='';
                        let name='';
                        if(params.row.status=='0'){
                            col='#007d7f';
                            name='未审核';
                        }else if(params.row.status=='1'){
                            col='#1aad33';
                            name='通过';
                        }else if(params.row.status=='2'){
                            col='#f00';
                            name='未通过';
                        }else{
                            col='#FFC107';
                            name='同意并向上级审批';
                        }   
                        return h('div',{
                            style: {
                                color: col,
                            },
                        }, name);     
                    }
                },
                {
                    title: '时间',
                    render: (h, params) => {
                        return h('div', params.row.created_at);
                    }
                },
            ],
            ruleValidate: {
                'reason.zh':[
                    { required: true, message: '请输入审核意见', trigger: 'blur' }
                ],
                examine:[
                    { required: true, message: '请选择审核状态', trigger: 'change' }
                ],
            },
            updateUrl:'api/leave/v1/teacher_leave/examine/',
        }
    },
    methods: {
        /************************************************************
         * 提交
         ************************************************************/
        submit (name) {
            this.btnload = true
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if(this.form.examine== 'no_sure'){
                        if(this.form.examine_id!=null){
                            this.editsubmit()
                        }else{
                            this.$Message.error('请选择审核人');
                            this.btnload = false
                        }    
                    }else{
                        this.editsubmit()
                    }
                } else {
                    this.$Message.error('请检查填写内容！');
                    this.btnload = false
                }
            })
        },
        /************************************************************
         * 提交做判断，公共的方法
         ************************************************************/
        editsubmit(){
            this.$http.put(this.updateUrl+this.datalists.teacher_leave_examine_id, this.form).then(val=>{
                this.$Message.success(val.message);
                this.$emit('requery',true)
            }).catch(err => {
                if (err.code && err.code == 422) {
                    this.$Message.error(err.message);
                }
                this.btnload = false
            })
        },
        /************************************************************
         * 选择审核状态，显示对应的内容
         ************************************************************/
        auditestatu(val){
            if(val == 'no_sure'){
                this.shows=true
                this.isshow = false
            }else if(val == 'yes'){
                this.shows=false
                this.isshow = false
            }else{
                this.isshow = true
            }
        },
        /************************************************************
         * 加载部门
         ************************************************************/
        load() {         
            this.$http.get('api/user/v1/get/duties/list').then((response) => {
                this.gradelist=response.data
            }).catch(err => {
				if (err.code && err.code == 422) {
                    this.$Message.error(err.message);
                }
			})  
        },
        /************************************************************
         * 加载调课记录、审核记录
         ************************************************************/
        record(){
            this.spinShow = true 
            if(this.datalists.teacher_leave.teacher_leave_id!=null){
                if(this.datalists.teacher_leave.whether_class==1){
                    this.iswhether = true
                    this.$http.get(`api/leave/v1/teacher_leave/my_course/${this.datalists.teacher_leave.teacher_leave_id}`).then((response) => {
                        this.whetherlist = response.data
                    }).catch(err => {
                        if (err.code && err.code == 422) {
                            this.$Message.error(err.message);
                        }
                        this.spinShow = false
                    })
                }else{
                    this.iswhether = false   
                    this.spinShow = false             
                }
                this.$http.get(`api/leave/v1/teacher_leave/getone/${this.datalists.teacher_leave.teacher_leave_id}`).then((response) => {
                    this.datalist = response.data.examine_status
                    this.spinShow = false
                }).catch(err => {
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                    this.spinShow = false
                })
            }
        },
        /************************************************************
         * 点击职务
         ************************************************************/
        studentInfo(value) {	
            this.teacherlist=[]
            if(value!=null){
                this.$http.get(`api/user/v1/get/teacher/user/list?duties_id=[${value}]`).then(val => {
                    this.teacherlist = val.data;
                }).catch(err => {
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                })
            }
        },
        /************************************************************
         * 点击老师
         ************************************************************/
        person(index) {		
            if(index!=null){
                this.examine_id = index;
            }
        },
        /************************************************************
         * 添加部门老师
         ************************************************************/
        addPeple() {
            if(this.examine_id!=null){
                if(this.teacherlist.length!=0){
                    this.form.examine_id = this.examine_id;
                    let obj = this.teacherlist.find(item => item.user_id == this.examine_id);
                    this.allPoles = [];
                    this.allPoles.push(obj);
                }
            }     
        },
        /************************************************************
         * 删除审核人
         ************************************************************/
        delPople(event, name) {                                    
			let i = this.allPoles.findIndex((item)=> {
				return item.id == name
			})
            this.allPoles.splice(i,1);
        },
    },
    mounted(){  
        this.load();  
        this.record()                      
    },
}
</script>
<style lang="less">
.leave-pending-edit{
    &-rows{
        padding: 8px 0 2px 0;
        font-size: 14px;
    }
    .detail-records{
        padding: 10px 0;
        position: relative;
    }
}
</style>
